<template>
  <div class="block_main blue-tit">
    <!-- <div class="nytit">首页&gt;通知/督办</div> -->

    <el-row style="padding-top: 10px">
      <el-col :span="24" style="padding:0 5px">
        <el-card>
          <div class="title">待分配诉求</div> 
         <!-- 筛选 -->
          <el-form style="padding:20px 20px 0" :inline="true" :model="region" class="demo-form-inline" size="small">


            <el-form-item label="时间">
              <el-date-picker v-model="region.startTime" value-format="yyyy-MM-dd" type="date" placeholder="开始日期">
              </el-date-picker>
              <el-date-picker v-model="region.endTime" value-format="yyyy-MM-dd" type="date" placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="部门">
              <el-select v-model="region.target" placeholder="选择部门分类">
                <el-option v-for="(list,index) in targetArr" :label="list.name" :value="list.name" :key="index"></el-option>
  
              </el-select>
            </el-form-item>
            <el-form-item label="状态">

              <el-select v-model="region.listStatus" placeholder="状态">
                <el-option label="全部" value="-1"></el-option>
                <el-option label="未受理" value="1"></el-option>
                <el-option label="受理中" value="2"></el-option>
                <el-option label="已完成" value="3"></el-option>
              </el-select>
              <el-button @click="Filter" type="primary">查询</el-button>
              <el-button type="success" @click="AddQuestion">新建诉求</el-button>
            </el-form-item>
            <!-- <span style="float:right;line-height:40px;">累计{{pagetotal}}项</span> -->
          </el-form>
          <!-- 筛选结束 -->
          <!-- 表格内容组件 -->
          <office-list :tableData="tableData" :isShow="isShow" v-on:childObjmoveTo="childObjmoveTo" @childObjEdit="childObjEdit" @childObjDel="childObjDel" @childObjSupervise="childObjSupervise" :useType="useType"></office-list>
          <!-- 表格内容组件 end-->
          <!-- 翻页 -->
          <div class="zpage">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size.sync="pagesize"
                layout="total, prev, pager, next, jumper"
                :total.sync="pagetotal">
            </el-pagination>
          </div>
          <!-- 翻页 end -->
        </el-card>
      </el-col>
    </el-row>
     <!-- 修改弹窗 -->
    <el-dialog
      title="修改信息"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <div class="layerup">
        <h2>企业信息：{{notice.company}}</h2>
        <p class="textover3">企业诉求：{{notice.content}}</p>
        <p><span>受理部门：{{notice.target}}</span><span>受理时间：{{notice.accepttime}}</span></p>
        <hr>
        <el-form style="padding:20px 20px 0" :inline="true" :model="layerForm" class="demo-form-inline">
           <el-form-item label="诉求分类">
              <el-select v-model="movegname" placeholder="选择诉求分类" style="width:150px;" >
                <el-option  v-for="(group,index) in MessageGroupArr" :label="group.name" :value="group.id" :key="index"></el-option>
              
              </el-select>
            </el-form-item>
            <el-form-item label="移交部门">
              <el-select v-model="moveTarget" placeholder="选择移交部门" style="width:180px;">
                <el-option v-for="(list,index) in targetArr" :label="list.name" :value="list.name" :key="index"></el-option>
              </el-select>
            </el-form-item>
            
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 移交弹窗 -->
    <el-dialog title="移交" :visible.sync="dialogVisibleMove" width="40%">
      <el-form ref="form" style="width:100%; margin:20px;" :model="moveForm" label-width="150px" size="small">
        <el-form-item label="诉求分类">
          <el-select v-model="moveForm.group" placeholder="诉求分类">
            <el-option label="诉求分类" value="1"></el-option>
            <el-option label="诉求分类2" value="2"></el-option>
          </el-select>
        </el-form-item>
        
      </el-form>
      <select-menu :sname="sname" :options="options" :dynamicValidateForm="dynamicValidateForm" v-on:changename="update"></select-menu><!--市级部门-->
      <select-menu :sname="sname2" :options="optionsArea" :dynamicValidateForm="dynamicValidateFormArea" v-on:changename="updateArea"></select-menu><!--县长热线-->
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleMove = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleMove = false" size="mini">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 督办弹窗 -->
    <el-dialog title="督办" :visible.sync="dialogVisibleSupervise" width="40%">
      <el-form ref="form" style="margin:20px;" :model="superviseForm" label-width="100px" size="small">
        <el-form-item label="督办信息" style="width:100%;">
          <el-input type="textarea" v-model="superviseForm.desc" rows="5" placeholder="请输入督办信息"></el-input>
        </el-form-item>
        <el-form-item label="附件">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-change="handleUpload"
            :file-list="fileList3">
            <el-button size="small" type="primary">上传附件</el-button>
            <div slot="tip" class="el-upload__tip">支持文档、图片、压缩包等类型文件上传</div>
          </el-upload>
        </el-form-item>
      </el-form>
      
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleSupervise = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="dialogVisibleSupervise = false" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import actionurl from '@/assets/js/actionurl'
import officeList from '@/components/manageOffice/List'
import selectMenu from '@/components/selectMenu.vue'

  export default {
    name: 'tableChart',
    components:{
      officeList,
      selectMenu
    },
    props: {
      chartOptions: Object,
      chartData: Object

    },
    data() {
      return {
        overtime:'',
        dialogVisible:false,
        dialogVisibleMove:false,
        dialogVisibleSupervise:false,
        isShow:true,
        useType:0,
        moveForm:{},
        superviseForm:{},
        region:{
          startTime:'',
          endTime:'',
          target:'',
          listStatus:'-1'
        },
        notice:{
          company:'',
          content:'',
          target:'',
          group:'',
          accepttime:'',
        },
        layerForm:{

        },
        targetArr:[],
        tableData: [],
        target:'',
        status:'',
        currentPage:1,
        pagesize:1,
        pagetotal:10000,
        moveTarget:'',
        movegname:'',
        loading:false,
        MessageGroupArr:'',
        

        sname:'市级部门',
        sname2:'县长热线',
        dynamicValidateForm: {
          domains: [{
            value: '运维',
            id:'10'
          },{
            value: '运维2',
            id:'103'
          }],
          selectList: [{
            value: '',
            id: ''
          }]
        },
        options: [{
          value: '10',
          label: '测试部门',
          id: '11'
        }, {
          value: '1',
          label: '开发部门',
          id: '22'
        }, {
          value: '20',
          label: '运营部门',
          id: '33'
        }, {
          value: '44',
          label: '廊坊爱心救助站',
          id: '44'
        }, {
          value: '40',
          label: '廊坊民政局',
          id: '55'
        }],
        dynamicValidateFormArea: {
          domains: [{
            value: '河北',
            id:'12'
          }],
          selectList: [{
            value: '',
            id: ''
          }]
        },
        optionsArea:[{
          value: '10',
          label: '安次区',
          id: '11'
        }, {
          value: '1',
          label: '广阳区',
          id: '22'
        }, {
          value: '20',
          label: '开发区',
          id: '33'
        }, {
          value: '44',
          label: '永清县',
          id: '44'
        }, {
          value: '40',
          label: '北京市',
          id: '55'
        }],
        fileList3: [{
          name: 'food.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }, {
          name: 'food2.jpeg',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }]
      }
    },
    methods: {
      //获取子组件移交按钮事件
      childObjmoveTo(obj){
        // console.log(obj);
        this.dialogVisibleMove = true;
      },
      //获取子组件编辑按钮事件
      childObjEdit(obj){
        console.log(obj);
      },
      //获取子组件删除按钮事件
      childObjDel(obj){

      },
      childObjSupervise(obj){
        this.dialogVisibleSupervise = true;
      },
      update(name){
        // console.log(name);
      },
      updateArea(name){
        // console.log(name);
      },
      handleUpload(){},
      superDetail(row){//督办按钮

        this.$router.push({path: '/supervise/'+row.id});
      },
      updateData(row){//修改事件
        this.dialogVisible = true;
        this.notice.company = row.company;
        this.notice.content = row.content;
        this.notice.target = row.target;
        this.notice.gname = row.gname;
        this.notice.accepttime = row.accepttime;
        //修改弹窗字段
        this.movegname = row.gname;

        this.questionClass();
      },
      MessageList(){// 获取列表
        var _this = this;
        actionurl.MessageList({
            pageNum:_this.pagesize,
            pageOn:_this.currentPage,
            status:_this.region.listStatus,
            start:_this.region.startTime,
            end:_this.region.endTime,
            target:_this.region.target
          }, function(re) {
            // console.log(re);
          if(re.status == 1){
            _this.tableData = re.data;
            _this.pagetotal = re.count;
            _this.loading = false;
          }else{
            _this.$message(re.msg);
          }
           
        });
      },
      handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				// this.currentPage == val;
				console.log(this.currentPage);
				this.MessageList();
      },
      intoDetail(row, event, column){

        this.$router.push({path: '/supervise/'+row.id});
      },
      Filter(){
        this.loading = true;
        this.MessageList();
      },
      targetListFn(){
        var _this = this;
        actionurl.targetList({
          }, function(re) {
            // console.log(re);
          if(re.status == 1){
            _this.targetArr = re.data;

          }else{
            _this.$message(re.msg);
          }
           
        });
      },
      questionClass(){
        var _this = this;
        actionurl.MessageGroup({
            mesgroup:1,//0-面对面等分类 1-八大类 
            fid:1
          }, function(re) {
            // console.log(re);
          if(re.status == 1){
            _this.MessageGroupArr = re.data;

          }else{
            _this.$message(re.msg);
          }
           
        });
      },
      AddQuestion(){
        this.$router.push({path: '/questionAdd'});
      },
      getuserInfo(){//获取用户信息
        var _this = this;
        actionurl.getUserInfo({
          }, function(re) {
            console.log(re);
            _this.useType = re.userType;//1--运营人员  2--各区县   3--运行局
        })
      },
     
    },
    mounted() {
      this.getuserInfo();//获取用户信息
      this.MessageList();
      this.targetListFn();
    },
    created() {
      
    }
  }
</script>
<style scoped lang="scss">
  .persent {
    width: 80%;
    height: 10px;

    display: flex;
    justify-content: space-between;
    position: relative;
    padding-right: 40px;

    span {
      background: #CCC;
      width: 100%;
      line-height: 10px;

      b {
        background: green;
        width: 100%;
        height: 100%;
        display: inline-block;
        float: left;
      }
    }

    em {
      line-height: 10px;
      position: absolute;
      right: 0;
    }

  }
.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 90%;
  }

.layerup{
    
    h2{
      font-size: 18px;
      font-weight: normal;
      text-align: center;
      margin-bottom: 15px;
    }
    span{
      width:46%;
      line-height: 20px;
    }
    p{
      display: flex;
      justify-content: space-between;
      color: #999;
      margin-bottom: 10px;
      
    }
    hr{
      border:1px solid #f5f5f5;
      margin-top: 15px;
    }
  }
  .titlehover{
    cursor: pointer;
    &:hover{
      color:#1d82d2;
    }
  }
</style>
